<template>
 <div>


   <div class="back mainWindow relative text-white">
     <div id="title-bar">
       <div class="title"></div>
     </div>
     <img style="-webkit-user-drag: none;" src="../assets/loginPage/loginBack.png" alt="" />
     <img class="u19" src="../assets/loginPage/u19.png" alt="" />
     <div class="systemName">
       <p>
         <span>耳鼻喉AI辅助诊断系统</span>
       </p>
     </div>
     <div class="systemBottomName">
       <p>
         <span>AI-assisted ENT diagnostic system</span>
       </p>
     </div>
     <div class="systemName2">
       <p>
         <span>AI INNOVATES HEALTHY LIVING</span>
       </p>
     </div>
     <div class="">
       <img class="loginBorder" src="../assets/loginPage/loginBorder.svg" alt="" />
       <div class="loginTitle">
         <p>
           <span>WELCOME，请登录</span>
         </p>
       </div>
       <div class="blueRect"></div>
     </div>
     <div class="inputContainer">
       <div class="relative">
         <span class="text-[34px]">账号：</span>
         <input
           v-model="account"
           class="h-[80px] mb-2 bg-transparent focusNone border-none"
           type="text"
           placeholder=""
         />
         <div class="relative bg-white h-[2px]"></div>
       </div>
       <div>
         <span class="text-[34px]">密码：</span>
         <input
           v-model="passwd"
           @keydown.enter="login"
           class="h-[80px] mb-2 bg-transparent focusNone border-none "
           type="password"
           placeholder=""
         />
         <div class="relative bg-white h-[2px]"></div>
       </div>
     </div>
     <div class="loginButton">
       <div>
         <a-button
           @click="login"
           class="pressAnimation bg-[#0099FF] text-white h-[60px] w-[400px] rounded-full absolute right-[70px] text-[26px]"
           type="primary"
         >
           登录
         </a-button>
       </div>
       <div class="absolute right-[230px] top-[65px] w-[70px]" v-show="false">
         <span>密码提示</span>
       </div>
     </div>
     <div>
       <j-button class="absolute top-[30px] right-10" @click="closeWin"></j-button>
     </div>
   </div>
 </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import API_BASE_URL from '../config'
import { message } from 'ant-design-vue'
import JButton from './jixiangComponents/j-button.vue'
import { closeWindow } from '../utils/electronUtils'
import { useStore } from 'vuex'
import { getAction, postAction } from '../utils/manage'

const store = useStore()
const router = useRouter()

const account = ref('')
const passwd = ref('')

const login = () => {
  let pwd;
  if (account.value==='001'){
    pwd = '123456'
  }else {
    pwd = passwd.value
  }
  // devLogin()
  postAction('/login', {
    account: account.value,
    passwd: pwd
  }).then((res) => {
    if (res.data.code === 200) {
      store.commit('setDoctorInfo',{
        doctorAccount: res.data.data.account,
        doctorName: res.data.data.doctor_name,
        doctorPasswd: pwd,
        doctorId: res.data.data.doctor_id
      })
      message.success('登录成功')
      router.push('/MainPage')
    }else {
      message.error('账号或密码错误')
    }
  })
}

function devLogin() {
  router.push('/MainPage')
}

const closeWin = () => {
  closeWindow()
}
</script>

<style scoped>
body {
  overflow: hidden;
}

.back {
}

.u19 {
  position: absolute;
  width: 759px;
  height: 58px;
  top: 30em;
  left: 8em;
}

.systemName {
  position: absolute;
  top: 396px;
  left: 8em;
  font-size: 38px;
}

.systemBottomName {
  position: absolute;
  top: 454px;
  left: 256px;
  font-size: 16px;
  letter-spacing: 8px;
}

.systemName2 {
  position: absolute;
  top: 600px;
  left: 274px;
  font-size: 22px;
  letter-spacing: 5px;
}

.loginBorder {
  position: absolute;
  right: 110px;
  top: 170px;
}

.loginTitle {
  position: absolute;
  top: 250px;
  right: 278px;
  font-size: 34px;
  /*display: flex;*/
  /*justify-content: center;*/
}

.blueRect {
  position: absolute;
  top: 308px;
  right: 362px;
  background-color: rgba(0, 153, 255);
  width: 150px;
  height: 4px;
}

.inputContainer {
  position: absolute;
  top: 360px;
  right: 176px;
  height: 300px;
  width: 520px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input {
  /*display: block;*/
  outline: none;
  font-size: 34px;
}

.loginButton {
  position: absolute;
  top: 626px;
  right: 176px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pressAnimation :hover{
}

/* 自定义标题栏样式 */
#title-bar {
  height: 40px;
  background-color: transparent;
  color: white;
  display: flex;
  align-items: center;
  /* padding-left: 12px; */
  user-select: none;
  -webkit-app-region: drag;
  position: absolute;
  width: 100%;
}
p {
  user-select: none;
}
</style>
